<template>
	<view class="main">
		<scroll-view scroll-x class="bg-white nav">
			<view class="flexR-FS-C">
				<view class="cu-item flex-sub" :class="active==0?'text-blue cur':''" @tap="tabSelect(0)">
					投诉信息
				</view>
				<view class="cu-item flex-sub" :class="active==1?'text-blue cur':''" @tap="tabSelect(1)">
					正在处理
				</view>
				<view class="cu-item flex-sub" :class="active==2?'text-blue cur':''" @tap="tabSelect(2)">
					处理完成
				</view>
			</view>
		</scroll-view>

		<template v-if="active == 0">
			<view class="cu-form-group">
				<view class="title">投诉类型</view>
				<picker :value="complaintIndex" :range="typeCds" :range-key="'typeName'" @change="_changeComplaint">
					<view class="picker">
						{{typeName}}
					</view>
				</picker>
			</view>

			<view class="cu-form-group">
				<view class="title">投诉人</view>
				<input id="complaintName" v-model="complaintName" placeholder="请输入投诉人"></input>
			</view>

			<view class="cu-form-group">
				<view class="title">手机号</view>
				<input id="tel" v-model="tel" placeholder="请输入手机号"></input>
			</view>

			<view class="cu-form-group mt20">
				<textarea id="context" v-model="context" placeholder="请输入投诉内容"></textarea>
			</view>

			<view class="block__title">照片信息</view>
			<view class="upload">
				<u-upload :fileList="fileList" name="1" multiple :maxCount="3"></u-upload>
			</view>

			<view class="button_up_blank"></view>

			<view class="btn-base flexR-Cen">提交</view>
		</template>

		<template v-if="active == 1">
			<view v-for="(item,index) in waitComplaint" :key="index" class="bg-white mt20 pad20 ft28">
				<view class="bottomLine flexR-SB-C pb10">
					<view>{{item.complaintId}}</view>
					<view class="text-gray">{{item.tel}}</view>
				</view>
				<view class="mt20 flexR-SB-C">
					<view class="text-gray">投诉类型</view>
					<view class="text-gray">{{item.typeName}}</view>
				</view>
				<view class="mt20 flexR-SB-C">
					<view class="text-gray">投诉人</view>
					<view class="text-gray">{{item.complaintName}}</view>
				</view>
				<view class="mt20 flexR-SB-C">
					<view class="text-gray">报修内容</view>
					<view class="text-gray">{{item.context}}</view>
				</view>

				<view class="topLine mt20 pad10 flexR-FE-C">
					<view class="detailBtn text-blue" @click="handleToDetail">详情</view>
				</view>
			</view>
		</template>

		<template v-if="active == 2">
			<view v-for="(item,index) in complaintd" :key="index" class="bg-white mt20 pad20 ft28">
				<view class="bottomLine flexR-SB-C pb10">
					<view>{{item.complaintId}}</view>
					<view class="text-gray">{{item.tel}}</view>
				</view>
				<view class="mt20 flexR-SB-C">
					<view class="text-gray">投诉类型</view>
					<view class="text-gray">{{item.typeName}}</view>
				</view>
				<view class="mt20 flexR-SB-C">
					<view class="text-gray">投诉人</view>
					<view class="text-gray">{{item.complaintName}}</view>
				</view>
				<view class="mt20 flexR-SB-C">
					<view class="text-gray">报修内容</view>
					<view class="text-gray">{{item.context}}</view>
				</view>

				<view class="topLine mt20 pad10 flexR-FE-C">
					<view class="pingjiaBtn text-blue mr20" @click="handleToPingjia">评价</view>
					<view class="detailBtn text-blue" @click="handleToDetail">详情</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				complaintIndex: 0,
				typeCds: [{
						typeName: '房屋设施投诉',
						typeCd: '1'
					},
					{
						typeName: '公共设施投诉',
						typeCd: '2'
					},
					{
						typeName: '园区环境投诉',
						typeCd: '3'
					},
					{
						typeName: '收费投诉',
						typeCd: '4'
					},
					{
						typeName: '服务质量投诉',
						typeCd: '5'
					}
				],
				typeName: '请选择',
				typeCd: '',
				tel: '',
				context: '',
				fileList: [],
				waitComplaint: [{
						complaintId: '1756453123453212',
						tel: '13266668888',
						typeName: '房屋设施投诉',
						complaintName: '吴鑫',
						createTime: '2024-12-22 15:32:33',
						context: '27号楼503一大早装修吵死了',
					}, {
						complaintId: '1756453123453214',
						tel: '13977776666',
						typeName: '卫生问题投诉',
						complaintName: '张伟',
						createTime: '2024-12-22 17:05:12',
						context: '小区公园垃圾没清理，影响环境。',
					},
					{
						complaintId: '1756453123453215',
						tel: '13755554444',
						typeName: '停车问题投诉',
						complaintName: '陈芳',
						createTime: '2024-12-22 18:20:30',
						context: 'B区地下车库停车位被长期占用。',
					},
					{
						complaintId: '1756453123453216',
						tel: '13622221111',
						typeName: '供水问题投诉',
						complaintName: '赵敏',
						createTime: '2024-12-22 19:15:00',
						context: '15号楼今天一直停水，没有通知。',
					},
					{
						complaintId: '1756453123453217',
						tel: '13533334444',
						typeName: '电梯故障投诉',
						complaintName: '黄建',
						createTime: '2024-12-22 20:00:25',
						context: '10号楼2单元电梯故障，困人超过半小时。',
					},
					{
						complaintId: '1756453123453218',
						tel: '13411112222',
						typeName: '社区安全投诉',
						complaintName: '孙楠',
						createTime: '2024-12-22 21:40:10',
						context: '21号楼附近有陌生人徘徊，存在安全隐患。',
					}
				],

				complaintd: [{
						complaintId: '1756453123453212',
						tel: '13266668888',
						typeName: '房屋设施投诉',
						complaintName: '吴鑫',
						createTime: '2024-12-22 15:32:33',
						context: '27号楼503一大早装修吵死了',
					}, {
						complaintId: '1756453123453214',
						tel: '13977776666',
						typeName: '卫生问题投诉',
						complaintName: '张伟',
						createTime: '2024-12-22 17:05:12',
						context: '小区公园垃圾没清理，影响环境。',
					},
					{
						complaintId: '1756453123453215',
						tel: '13755554444',
						typeName: '停车问题投诉',
						complaintName: '陈芳',
						createTime: '2024-12-22 18:20:30',
						context: 'B区地下车库停车位被长期占用。',
					},
					{
						complaintId: '1756453123453216',
						tel: '13622221111',
						typeName: '供水问题投诉',
						complaintName: '赵敏',
						createTime: '2024-12-22 19:15:00',
						context: '15号楼今天一直停水，没有通知。',
					}
				],
			}
		},
		methods: {
			_changeComplaint: function(e) {
				this.typeName = this.typeCds[e.detail.value].typeName;
				this.typeCd = this.typeCds[e.detail.value].typeCd;
			},
			sendImagesData: function(e) {
				this.photos = [];
				if (e.length > 0) {
					e.forEach((img) => {
						this.photos.push(img.fileId);
					})
				}
			},
			tabSelect: function(_active) {
				this.active = _active;
			},

			handleToPingjia() {
				uni.navigateTo({
					url: '/sub-menu/complaint/appraiseComplaint'
				})
			},

			handleToDetail() {
				uni.navigateTo({
					url: '/sub-menu/complaint/complaintDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./css/formGroup.scss";

	.main {
		background-color: #f1f1f1;
		height: 100%;

		.cu-item {
			width: 33.33%;
			height: 90rpx;
			margin: 0 10rpx;
			padding: 0 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		.cur {
			border-bottom: 4rpx solid;
		}

		.bottomLine {
			border-bottom: 2rpx solid #f1f1f1;
		}

		.topLine {
			border-top: 2rpx solid #f1f1f1;
		}
	}

	.block__title {
		margin: 0;
		font-weight: 400;
		font-size: 14px;
		color: rgba(69, 90, 100, .6);
		padding: 40rpx 30rpx 20rpx;
	}

	.button_up_blank {
		height: 40rpx;
	}

	.uploader-container {
		margin: 0 10px;
	}

	.aku_photo_view {
		background-color: #FFF;
		padding: 40rpx 0 40rpx 40rpx;
	}

	.aku_photo_view text {
		font-size: 30rpx;
		color: #8a8a8a
	}

	.upload {
		width: 100%;
		padding: 20rpx;
		background-color: #FFF;
	}

	.btn-base {
		width: 600rpx;
		padding: 0 40rpx;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 14rpx;
		color: #fff;
		background-color: #1A65FF;
		font-weight: bold;
		margin: 50rpx auto 100rpx;
	}

	.pingjiaBtn {
		background-color: #1A65FF;
		color: #fff;
		border-radius: 6rpx;
		padding: 6rpx 20rpx;
	}
	.detailBtn {
		border: 2rpx solid #1A65FF;
		border-radius: 6rpx;
		padding: 6rpx 20rpx;
	}
</style>